<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ElSelect, ElOption } from 'element-plus'
import { rolePageApi } from '@/api/role'
import type { Role } from '@/api/role/types'

// const props =
defineProps({
  value: {
    type: Number || String,
    default: () => null
  },
  disabled: {
    type: Boolean,
    default: () => false
  }
})

// 定义model对象
const model = defineModel<number | string>()

// 加载数据
const list = ref<Role[]>([])
const loading = ref(false)
const loadList = async () => {
  loading.value = true
  const params = {
    pageNum: 1,
    pageSize: 20
  }
  const res = await rolePageApi(params)
  list.value = res.data.records
  await nextTick()
  loading.value = false
}
loadList()

const onDisabled = (value: boolean = false) => {
  console.log(value)
}

// 对外函数
defineExpose({
  onDisabled
})
</script>

<template>
  <el-select v-model="model" clearable :disabled="disabled">
    <el-option v-for="item in list" :label="item.name" :value="item.id" :key="item.id" />
  </el-select>
</template>
